<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工具箱 - 工具分类</title>
    <!-- 引入Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-3">
                <div class="flex items-center space-x-4">
                    <a href="#" class="flex items-center space-x-2">
                        <i class="fas fa-tools text-blue-600 text-2xl"></i>
                        <span class="font-bold text-xl text-blue-600">工具箱</span>
                    </a>
                </div>
                
                <div class="w-1/3">
                    <div class="relative">
                        <input type="text" placeholder="搜索工具..." class="w-full py-2 px-4 bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white">
                        <button class="absolute right-0 top-0 mt-2 mr-4 text-gray-500">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                
                <div class="flex items-center space-x-4">
                    <a href="#" class="text-gray-600 hover:text-blue-600">
                        <i class="far fa-star mr-1"></i>收藏
                    </a>
                    <a href="#" class="text-gray-600 hover:text-blue-600">
                        <i class="far fa-clock mr-1"></i>历史
                    </a>
                    <a href="#" class="flex items-center text-gray-600 hover:text-blue-600">
                        <i class="far fa-user-circle text-2xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 页面标题 -->
    <div class="bg-blue-600 text-white py-10">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold">工具分类</h1>
                    <p class="mt-2">浏览所有工具类别，找到您需要的工具</p>
                </div>
                <div class="bg-white bg-opacity-20 p-4 rounded-lg hidden md:block">
                    <div class="flex space-x-2 text-sm">
                        <a href="#" class="hover:underline">首页</a>
                        <span>/</span>
                        <span class="font-medium">工具分类</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-10">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 侧边栏过滤器 -->
            <div class="w-full lg:w-1/4">
                <div class="bg-white rounded-lg shadow-md p-6 sticky top-20">
                    <h2 class="text-xl font-bold mb-6 text-gray-800">筛选条件</h2>
                    
                    <!-- 搜索框 -->
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2 font-medium">搜索工具</label>
                        <div class="relative">
                            <input type="text" placeholder="输入关键词..." class="w-full py-2 px-4 bg-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white">
                            <button class="absolute right-0 top-0 mt-2 mr-4 text-gray-500">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 类别过滤 -->
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2 font-medium">工具类别</label>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600"> 
                                <span class="ml-2 text-gray-700">文本处理</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600"> 
                                <span class="ml-2 text-gray-700">图片处理</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600"> 
                                <span class="ml-2 text-gray-700">开发工具</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600"> 
                                <span class="ml-2 text-gray-700">数据转换</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600"> 
                                <span class="ml-2 text-gray-700">文件转换</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600"> 
                                <span class="ml-2 text-gray-700">生活工具</span>
                            </label>
                        </div>
                    </div>
                    
                    <!-- 使用频率过滤 -->
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2 font-medium">使用频率</label>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="radio" name="frequency" class="form-radio h-5 w-5 text-blue-600">
                                <span class="ml-2 text-gray-700">全部</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="frequency" class="form-radio h-5 w-5 text-blue-600">
                                <span class="ml-2 text-gray-700">最常用</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="frequency" class="form-radio h-5 w-5 text-blue-600">
                                <span class="ml-2 text-gray-700">最近使用</span>
                            </label>
                        </div>
                    </div>
                    
                    <!-- 按钮 -->
                    <div class="space-y-3">
                        <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg">应用筛选</button>
                        <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg">重置筛选</button>
                    </div>
                </div>
            </div>
            
            <!-- 主内容区 -->
            <div class="w-full lg:w-3/4">
                <!-- 工具分类部分 -->
                <div>
                    <!-- 分类1: 文本处理 -->
                    <div class="mb-10">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <div class="rounded-full bg-blue-100 p-2 mr-3">
                                    <i class="fas fa-font text-blue-600 text-lg"></i>
                                </div>
                                <h2 class="text-2xl font-bold text-gray-800">文本处理</h2>
                            </div>
                            <a href="#" class="text-blue-600 hover:underline flex items-center text-sm">
                                查看全部 <i class="fas fa-chevron-right ml-1"></i>
                            </a>
                        </div>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                            <!-- 工具卡片 -->
                            <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                                <div class="bg-blue-500 w-2"></div>
                                <div class="p-4 flex-1">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-text-height text-blue-600 mr-2"></i>
                                        <h3 class="font-bold">大小写转换</h3>
                                    </div>
                                    <p class="text-gray-600 text-sm">将文本转换为大写、小写或首字母大写</p>
                                </div>
                            </a>
                            
                            <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                                <div class="bg-blue-500 w-2"></div>
                                <div class="p-4 flex-1">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-lock text-blue-600 mr-2"></i>
                                        <h3 class="font-bold">文本加密/解密</h3>
                                    </div>
                                    <p class="text-gray-600 text-sm">使用多种算法加密或解密文本内容</p>
                                </div>
                            </a>
                            
                            <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                                <div class="bg-blue-500 w-2"></div>
                                <div class="p-4 flex-1">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-exchange-alt text-blue-600 mr-2"></i>
                                        <h3 class="font-bold">文本比较</h3>
                                    </div>
                                    <p class="text-gray-600 text-sm">比较两段文本的差异，突出显示不同之处</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    
                    <!-- 分类2: 图片处理 -->
                    <div class="mb-10">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <div class="rounded-full bg-green-100 p-2 mr-3">
                                    <i class="fas fa-image text-green-600 text-lg"></i>
                                </div>
                                <h2 class="text-2xl font-bold text-gray-800">图片处理</h2>
                            </div>
                            <a href="#" class="text-blue-600 hover:underline flex items-center text-sm">
                                查看全部 <i class="fas fa-chevron-right ml-1"></i>
                            </a>
                        </div>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                            <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                                <div class="bg-green-500 w-2"></div>
                                <div class="p-4 flex-1">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-compress-arrows-alt text-green-600 mr-2"></i>
                                        <h3 class="font-bold">图片压缩</h3>
                                    </div>
                                    <p class="text-gray-600 text-sm">无损压缩图片文件，减小体积</p>
                                </div>
                            </a>
                            
                            <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                                <div class="bg-green-500 w-2"></div>
                                <div class="p-4 flex-1">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-crop-alt text-green-600 mr-2"></i>
                                        <h3 class="font-bold">图片裁剪</h3>
                                    </div>
                                    <p class="text-gray-600 text-sm">裁剪图片到指定尺寸或比例</p>
                                </div>
                            </a>
                            
                            <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                                <div class="bg-green-500 w-2"></div>
                                <div class="p-4 flex-1">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-sync-alt text-green-600 mr-2"></i>
                                        <h3 class="font-bold">格式转换</h3>
                                    </div>
                                    <p class="text-gray-600 text-sm">在PNG、JPG、WebP等格式间相互转换</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    
                    <!-- 分类3: 开发工具 -->
                    <div class="mb-10">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <div class="rounded-full bg-purple-100 p-2 mr-3">
                                    <i class="fas fa-code text-purple-600 text-lg"></i>
                                </div>
                                <h2 class="text-2xl font-bold text-gray-800">开发工具</h2>
                            </div>
                            <a href="#" class="text-blue-600 hover:underline flex items-center text-sm">
                                查看全部 <i class="fas fa-chevron-right ml-1"></i>
                            </a>
                        </div>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                            <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                                <div class="bg-purple-500 w-2"></div>
                                <div class="p-4 flex-1">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-code-branch text-purple-600 mr-2"></i>
                                        <h3 class="font-bold">JSON格式化</h3>
                                    </div>
                                    <p class="text-gray-600 text-sm">格式化、验证和美化JSON数据</p>
                                </div>
                            </a>
                            
                            <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                                <div class="bg-purple-500 w-2"></div>
                                <div class="p-4 flex-1">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-magic text-purple-600 mr-2"></i>
                                        <h3 class="font-bold">代码美化</h3>
                                    </div>
                                    <p class="text-gray-600 text-sm">格式化和美化HTML、CSS、JS代码</p>
                                </div>
                            </a>
                            
                            <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                                <div class="bg-purple-500 w-2"></div>
                                <div class="p-4 flex-1">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-search text-purple-600 mr-2"></i>
                                        <h3 class="font-bold">正则表达式测试</h3>
                                    </div>
                                    <p class="text-gray-600 text-sm">测试和验证正则表达式的匹配结果</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="mt-8 flex justify-center">
                        <nav class="inline-flex rounded-md shadow">
                            <a href="#" class="py-2 px-4 bg-white border border-gray-300 rounded-l-md text-gray-500 hover:bg-gray-50">
                                上一页
                            </a>
                            <a href="#" class="py-2 px-4 bg-blue-600 border border-blue-600 text-white">
                                1
                            </a>
                            <a href="#" class="py-2 px-4 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50">
                                2
                            </a>
                            <a href="#" class="py-2 px-4 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50">
                                3
                            </a>
                            <a href="#" class="py-2 px-4 bg-white border border-gray-300 rounded-r-md text-gray-700 hover:bg-gray-50">
                                下一页
                            </a>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-bold mb-4">关于我们</h3>
                    <p class="text-gray-400">工具箱是一个提供各种在线工具的平台，旨在为用户提供便捷、高效的在线工具服务。</p>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">热门工具</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white">图片压缩</a></li>
                        <li><a href="#" class="hover:text-white">JSON格式化</a></li>
                        <li><a href="#" class="hover:text-white">文本转换器</a></li>
                        <li><a href="#" class="hover:text-white">单位换算</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">常用链接</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white">使用指南</a></li>
                        <li><a href="#" class="hover:text-white">用户协议</a></li>
                        <li><a href="#" class="hover:text-white">隐私政策</a></li>
                        <li><a href="#" class="hover:text-white">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-weixin"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-weibo"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>© 2023 工具箱 版权所有</p>
            </div>
        </div>
    </footer>
</body>
</html> 